<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
			}

			body {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
			}

			div {
				width: 200px;
				height: 200px;
				background: red;
				transition: 5s;
			}

			div:hover {
				/*   animation: ani-scale 5s linear; */
				/*   transform: scale(2); */

				/*   animation: ani-move 5s linear;
			  transform: translateX(-100px); */

				animation: ani-move 5s linear;
				transform: scale(2);
			}

			@keyframes ani-scale {
				from {
					transform: scale(1);
				}

				to {
					transform: scale(0.5);
				}
			}

			@keyframes ani-move {
				from {
					transform: translateX(0px);
				}

				to {
					transform: translateX(100px);
				}
			}
		</style>
	</head>
	<body>
		<h1>css animation 和 transition 动画同时触发，测试两个动画是相互叠加还是抵消？</h1>
		<p>把鼠标移动到红方块上，观看效果</p>
		<p>css animation: 向右移动</p>
		<p>tranisition: 放大1倍</p>
		<h2>结论：animation会覆盖transition的效果，造成transition的动画失效</h2>
		<div></div>
	</body>
</html>
